<template>
    <div id="tmpl">
        <!-- 1.0轮播图组件 -->
        <div class="silder">
            <silder :imgs="list"></silder>
        </div>

        <!--2.0 实现商品购买区-->
        <!--2.0 实现商品购买区-->
		<div id="buy">
			<h4 v-text="info.title"></h4>
			<p class="line"></p>
			<ul>
				<li class="price">
					市场价: <s>￥{{info.market_price}}</s>    销售价：<span>￥{{info.sell_price}}</span>
				</li>
                <!-- inputNumber子组件向goodsinfo父组件传值 -->
				<li class="clear">
					<span class="Nleft">购买数量：</span>
                    <inputNumber @dataobj="getcount" class="inputNumberL" > </inputNumber>
                    <!-- 设置添加购物车动画 -->
                    <transition name="show"
                                @before-enter="beforeEnter"
                                @enter="enter"
                                @after-enter="afterEnter">
                        <div v-if="isshow" class="ball"></div>
                    </transition>
				</li>
				<li>
					<mt-button type="primary" size="small">立即购买</mt-button>
					<mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
				</li>
			</ul>
		</div>

		<div id="params">
				<h6>商品参数</h6>
				<p class="line"></p>
			<ul>
				<li>商品货号：{{info.goods_no}}</li>
				<li>库存情况：{{info.stock_quantity}}</li>
				<li>上架时间：{{info.add_time | datefmt('YYYY-MM-DD')}}</li>
			</ul>
		</div>

        <!--3.0 图文详情-->
        <!--4.0 商品评论-->
        <div id="other">
            <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
                <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
            </router-link>
            <router-link v-bind="{to:'/goods/goodscomment/'+id}">
            <mt-button type="danger" size="large">商品评论</mt-button>
            </router-link>
        </div>
    </div>
</template>

<script>
import silder from '../subcom/silder.vue';
import common from '../../kids/common.js';
import inputNumber from '../subcom/inputNumber.vue'; 
//导入vm.js
import {vm,COUNTSRT} from '../../kids/vm.js'; 
// 导入localSg.js
import {setItem,valueObj} from '../../kids/localSg.js';
import { Toast } from 'mint-ui';
export default {
    components: {
        //注册轮播图组件,添加购物车组件
        silder,
        inputNumber     
    },
    data() {
        return {
            isshow:false,
            inputNumberCount:1,//当前购买的数量
            id: 0,
            list: [],
            info:[]

        }
    },
    created() {
        this.id = this.$route.params.id;  
        this.getimgs();
        this.getinfo();
         
    },
    
    methods: {
        //5.0 动画的三个方法
        //5.1.0设置小球的初始位置
        beforeEnter(el){
            el.style.transform="translate(0px,0px)";
           
        },
        //5.2.0设置小球的结束位置
        enter(el,done){
            //保证小球出现
            el.offsetWidth;
            //设置小球的结束位置
            el.style.transform ="translate(65px,316px)";
            //结束动画
            done();
            Toast("已经添加到购物车");
        },
         afterEnter(el){
             //5.3.0重置小球初始化状态
             this.isshow =!this.isshow;
        },
        //4.0加入购物车的方法
        toshopcar(){
            //触发事件
            vm.$emit(COUNTSRT,this.inputNumberCount);
          
            //将数据存储到本地localStroage中
            valueObj.goodsid =this.id;
            valueObj.count =this.inputNumberCount;
            //setItem(k,v);以键值对的形式存储
            setItem(valueObj);
            //实现小球动画
            this.isshow =!this.isshow;
           
        },
        //3.0获取inputNumber中传入的值
        getcount(count){
            //console.log(count);
            this.inputNumberCount =count;
        },
        //2.0获取商品详情数据
        getinfo(){
            var url =common.apidomain+'/api/goods/getinfo/'+this.id;
            this.$http.get(url).then(function(res){
                this.info = res.body.message[0];
            })
        },
        //1.0 获取轮播图信息
        getimgs() {
            var url = common.apidomain + '/api/getthumimages/' + this.id;
            this.$http.get(url).then(function(res) {
                this.list = res.body.message;
            })
        }
    }
}
</script>

<style scoped>

.clear{
    height: 50px;
    line-height: 50px;
}
.Nleft,.inputNumberL{
    float: left;
}
   .silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
}

#buy,
#params,
#other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
}

.line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

#buy ul,
#params ul {
    padding-left: 0px;
}

#buy h4 {
    color: #0094ff;
    padding: 5px;
}

#buy li,
#params li {
    list-style: none;
    padding: 8px;
}

#buy .price span {
    color: red;
}

#other .imgdesc {
    margin-bottom: 20px;
}
.ball{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    left:180px;
    z-index: 100;
    transition: all 0.2s ease;
    background: red ;    
}
</style>
